<template>
  <nav-bar title="账户安全" left-text="" left-arrow @click-left="onClickLeft" />

  <div class="box">


  <router-link :to="{name:'User-phone'}">
  <div class="ph">
  <p>当前手机号：195****8584</p>
  <span>已绑定</span>&nbsp;<b>195****8584</b>
  <span class="phbtn">更换号码</span>

  </div>
 </router-link>  


<router-link :to="{name:'User-password'}">
  <p class="ap">修改密码<icon name="arrow" style="margin-top:13px;" /></p>
</router-link>


</div>
<p class="p-p" @click="OffShow">注销账号<icon name="arrow" style="margin-top:10px" /></p>

<overlay :show="show" @click="over" duration="0" />


  <div class="wrapper" @click.stop>
    <div class="off" v-show="offshow">
  <p>超级课堂客服为您服务</p>
  <span>如需注销账号，请联系客服处理，客服工作时间：10：00-18:00</span>
  <span>超级课堂客服竭诚为您服务，祝您学习进步</span>
<div class="btn">
  <button  @click="over" >取消</button>
  <button  @click="over">联系客服</button>
</div>
</div>
  </div>


<!-- 注销账号弹窗 -->

</template>
<script setup>
// import { useRouter } from "vue-router";
import { ref } from "vue";
import { NavBar,Icon,Overlay,Button } from 'vant';
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft=()=>{
router.go(-1)
};
const show = ref(false);
const offshow = ref(false);

const over = ()=>{
  offshow.value = false;
  show.value = false;
}
const OffShow =()=>{
  show.value = true;
  offshow.value = true;
}
</script>

<!-- 样式 -->

<style scoped>
/* 响应式 */

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
body{
  background-color: rgb(240,243,248);
}
.box{
  padding: 0 10px;
  border-top: .3125rem solid rgb(240,243,248);
  font-size: .8rem;
  position: relative;
}
.box .ap{
  color: black;
  width: 100%;
  height: 2.1875rem;
  border-bottom: 1px solid #f0f0f0;
  line-height: 2.1875rem;
}
.p-p{
  width: 100%;
  height: 2.1875rem;
  border-bottom: 1px solid #f0f0f0;
  line-height: 2.1875rem;
  border-top: .3125rem solid rgb(240,243,248);
  font-size: .8rem;
  text-indent: .5rem;
  padding-right:.6rem ;
  box-sizing: border-box;
}
.box .ph{
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  height: 3.125rem;
  line-height: 1.5625rem;
  color: black;
  position: relative;
}
.box .ph span{
  font-size: .6rem;
  color: rgb(172,172,172);
}
.box .ph b{
  font-size: .6rem;
  color: var(--main-color);
}
.van-icon{
  float: right;
}
.box .ph .phbtn{
  display: block;
  position: absolute;
  right: 0;
  bottom: .9375rem;
  width: 3.125rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 1.25rem;
  background-color: var(--main-color);
  color: white;
}
.off{
  border-radius: .625rem;
  border: none;
  width: 50%;
  height: 24vh;
  border: 1px solid saddlebrown;
  font-size: .7rem;
  padding: 2.9985vh;
  box-sizing: border-box;
  z-index:2;
  background-color: white;

}
.off p{
  text-align: center;
  margin-bottom: 2.9985vh;
  font-size: .875rem;
}
.off span{
  color:rgb(157,157,157) ;
  display: block;
}
.off .btn{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 2.9985vh;
}
.btn button{
  width: 45%;
  border: none;
  height: 2.9985vh;
  border-radius: 1.25rem;
}
.btn button:nth-child(1){
  color: gray;
}
.btn button:nth-child(2){
  background-color: var(--main-color);
  color: white;
}

</style>